import  React,{lazy,Suspense} from 'react';
import {connect} from 'react-redux';
import {Route,Switch,Redirect} from 'react-router-dom';
import Css from '../../../assets/css/home/goods/index.css';
import {GoPageReplace,LocalParam,GoPagePush} from "../../../assets/js/utils";

const goodsCommodity=lazy(()=>import('./commodity'));
const goodsDetails=lazy(()=>import('./details'));
const goodsEvaluate=lazy(()=>import('./evaluate'));
class goodsDetailsNav extends React.Component{
    constructor(props){
        super(props);
        this.state={
            gid:props.location.search!==''?LocalParam(props.location.search).search:'',
            aNav:[
                {name:'商品',checked:false,url:'goods/details/commodity'},
                {name:'详情',checked:false,url:'goods/details/details'},
                {name:'评价',checked:false,url:'goods/details/evaluate'},
            ]
        }
    }
    componentDidMount(){
        this.Refresh()
    }
    //刷新页面通过链接获取当前状态
    Refresh(){
        let pathname=this.props.location.pathname,temaNav=this.state.aNav;
        switch (pathname) {
            case window.base.config.path+'goods/details/commodity':
                temaNav[0].checked=true;
                break;
            case window.base.config.path+'goods/details/details':
                temaNav[1].checked=true;
                break;
            case window.base.config.path+'goods/details/evaluate':
                temaNav[2].checked=true;
                break;
            default:
                temaNav[0].checked=true;
                break;
        }
        this.setState({aNav:temaNav})
    }
    //返回
    goBack(){
       this.props.history.goBack()
    }
    // 不计入历史记录
    goPagePush(url,index){
        GoPageReplace(this.props,url+'?gid='+this.state.gid.gid);
        this.setDefauleUrl(index)
    }
    goPushGage(url){
        GoPagePush(this.props,url);
        // console.log(url)
        // this.props.history.push(window.base.config.path+url)
    }
    //点击默认选中
    setDefauleUrl(index){
        let temANav=this.state.aNav;

        for (let i in temANav){
            temANav[i].checked=false;
        };
        temANav[index].checked=true;
        this.setState({aNav:temANav});
    }
    render(){
        return(
            <div>
                <div className={Css['goodsDetailsTop']}>
                    <div className={Css['goodsGobackIcn']} onClick={this.goBack.bind(this)}><i className={'goBackIcn fs50'} /> </div>
                    <div className={Css['goodsDetailsNav']}>
                        <ul>
                            {
                                this.state.aNav.map((item,index)=>{
                                    return(
                                        <li key={index} className={item.checked?Css['active']:''} onClick={this.goPagePush.bind(this,item.url,index)}>{item.name}</li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                    <div id="cartIcn" className={Css['cartIcn']} onClick={this.goPushGage.bind(this,'home/cart')} >
                        <i className={'cartIcn fs50'} />
                        <div className={this.props.state.redCart.aCartData.length>0?Css['spot']+' spot':Css['spot']+' spot hiden'}></div>
                    </div>
                </div>
                <div className={Css['goodsDetailsNavRout']}>
                    <Suspense fallback={<React.Fragment/>}>
                        <Switch>
                            <Route path={window.base.config.path+'goods/details/commodity'} component={goodsCommodity} />
                            <Route path={window.base.config.path+'goods/details/details'} component={goodsDetails}/>
                            <Route path={window.base.config.path+'goods/details/evaluate'} component={goodsEvaluate}/>
                            <Redirect to={window.base.config.path+'goods/details/commodity'}/>
                        </Switch>
                    </Suspense>
                </div>
            </div>
        )
    }
}
export default connect((state)=>{
    return{
        state:state
    }
})(goodsDetailsNav)